<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

     

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('User_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-user_id" data-rule="required" data-source="user/user/index" data-field="mobile" class="form-control selectpage form-control" name="row[user_id]" type="text" value="">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Grade')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="radio">
                <label :for="'c-grade_'+index" v-for="(grade, index) in grades">
                    <input type="radio" name="row[grade]" v-model="grade_id" :value="index" :id="'c-grade_'+index">  {{grade}}
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Province_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="col-sm-4">
                <select name="row[province_id]" id="" v-model="pid" class="form-control">
                    <option value="">请选择</option>
                    <option :value="p.id" v-for="p in provinces">{{p.areaname}}</option>
                </select>
            </div>
            <div class="col-sm-4" :class="grade_id == 1?'hidden':''">
                <select name="row[city_id]" id=""  v-model="cid" class="form-control">
                    <option value="">请选择</option>
                    <option :value="c.id" v-for="c in citys">{{c.areaname}}</option>
                </select>
            </div>
            <div class="col-sm-4"  :class="grade_id != 3?'hidden':''">
                <select name="row[area_id]" id="" v-model="aid" class="form-control">
                    <option value="">请选择</option>
                    <option :value="a.id" v-for="a in areas">{{a.areaname}}</option>
                </select>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
        <div class="col-xs-12 col-sm-8">
            {foreach name="statusList" item="vo"}
                <label for="c-status_{$key}">
                    <input type="radio" name="row[status]" value="{$key}" id="c-status_{$key}" {eq name="$key" value="1"}checked{/eq}> {$vo}
                </label>
            {/foreach}
        </div>
    </div>
    

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script src="/assets/js/vue/vue-resource.js"></script>
<script>
    var vue = new Vue({
        el: '#add-form',
        data: {
            provinces: [],
            citys: [],
            areas: [],
            pid: '',
            cid: '',
            aid: '',
            grades: {:json_encode($gradeList)},
            grade_id: 1
        },
        mounted: function(){
            this.getArea(0, 'p');

        },
        methods:{
            getArea: function(pid, type){
                var that = this;
                this.$http.post('{:url("base/getNextArea")}',{
                    aid: pid,
                },{
                    emulateJSON:true
                }).then(function(res){
                    console.log(res);
                    if(res.body.code){
                        if(type == 'p') {
                            that.provinces = res.body.data;
                            that.citys = that.areas = [];
                            that.pid = that.cid = that.aid = '';
                        } else if(type == 'c') {
                            that.citys = res.body.data;
                            that.areas = [];
                            that.cid = that.aid = '';
                        } else {
                            that.areas = res.body.data;
                            that.aid = '';
                        }
                    }
                },function(error){
                    layer.msg('获取地区出错');
                });
            }
        },
        watch: {
            pid(val, oldVal) {
                this.getArea(val, 'c');
            },
            cid(val, oldVal) {
                this.getArea(val, 'a');
            }
        }
    });
</script>